
<template>
  <div class="faimly_detail">
    <el-table border stripe style="width: 100%" v-loading="loading" element-loading-text="加载中..." :data="familyArr"
      ref="el_table" :row-key="getRowKeys" :expand-row-keys="expands" @current-change="toggleRowExpansion">
      <div>
        <el-table-column type="expand">
          <template slot-scope="props">
            <div style="border: 1px solid #e4e7ed">
              <el-tabs v-model="activeName" type="card">
                <el-tab-pane label="基本信息" name="基本信息">
                  <el-form label-position="left" label-width="90px" class="demo-table-expand" style="padding: 10px">
                    <el-row>
                      <el-col :span="12">
                        <el-form-item label="出生日期：">
                          {{ props.row.birthday || '--' }}
                        </el-form-item>
                      </el-col>
                      <el-col :span="12">
                        <el-form-item label="民族：">
                          {{ props.row.nation || '--' }}
                        </el-form-item>
                      </el-col>
                      <el-col :span="12">
                        <el-form-item label="联系电话：">
                          <span v-if="photoCheck === props.row.photoCheck">
                            {{ props.row.phone }}
                          </span>
                          <span v-else>{{ hideOfString(props.row.phone) }}</span>
                          <i class="fa fa-eye pointer" aria-hidden="true"
                            @click="get_sensitive_fields(props.row, checkPhoto)"></i>
                        </el-form-item>
                      </el-col>

                      <el-col :span="12">
                        <el-form-item style="width: 100%" label="身份证号：">
                          <span v-if="photoCheck === props.row.photoCheck">
                            {{ props.row.idCard }}
                          </span>
                          <span v-else>{{ hideOfString(props.row.idCard) }}</span>
                          <i class="fa fa-eye pointer" aria-hidden="true"
                            @click="get_sensitive_fields(props.row, checkPhoto)"></i>
                        </el-form-item>
                      </el-col>
                      <el-col :span="12">
                        <el-form-item label="录入方式：">
                          {{ props.row.registration || '--' }}
                        </el-form-item>
                      </el-col>
                      <el-col :span="12">
                        <el-form-item label="人员类型">
                          {{ props.row.typeS || '--' }}
                        </el-form-item>
                      </el-col>
                      <el-col :span="12">
                        <el-form-item style="width: 100%" label="详情地址：">
                          {{ props.row.address || '--' }}
                        </el-form-item>
                      </el-col>
                    </el-row>
                  </el-form>
                </el-tab-pane>
                <el-tab-pane label="车辆信息" name="车辆信息">
                  <el-form label-position="left" label-width="90px" class="demo-table-expand" style="padding: 10px">
                    <el-row>
                      <el-col :span="12">
                        <el-form-item label="车辆：">
                          <div v-if="carData && carData.length > 0">
                            <p v-for="(car, inx) in carData" :key="inx" style="width: 400px">
                              <span>{{ car.license }}</span>
                            </p>
                          </div>
                          <div v-else>暂无数据</div>
                        </el-form-item>
                      </el-col>
                    </el-row>
                    <el-row>
                      <el-col :span="12">
                        <el-form-item label="通行记录：">
                          <div v-if="carPass.length > 0">
                            <p v-for="(car, inx) in carPass" :key="inx" style="width: 400px">
                              <span>{{ $format(new Date(car.time)) }}</span>
                              <span>进入方向：{{ car.open === 1 ? '出' : '进' }}</span>
                              <span>抓拍设备 ：{{ car.deviceName || '-' }}</span>
                            </p>
                          </div>
                          <div v-else>暂无数据</div>
                        </el-form-item>
                      </el-col>
                    </el-row>
                  </el-form>
                </el-tab-pane>
                <el-tab-pane label="组织信息" name="组织信息">
                  <el-form label-position="left" label-width="90px" class="demo-table-expand" style="padding: 10px">
                    <el-row>
                      <el-col :span="12">
                        <el-form-item label="政治面貌：" v-if="props.row.political">
                          <span>
                            {{ props.row.political }}
                          </span>
                        </el-form-item>
                        <el-form-item label="政治面貌：" v-else>
                          <span>
                            {{ props.row.type_party ? props.row.type_party : '-' }}
                          </span>
                        </el-form-item>
                      </el-col>
                      <el-col :span="12">
                        <el-form-item label="组织部门：">
                          <span>
                            {{ props.row.departmentName ? props.row.departmentName : '-' }}
                          </span>
                        </el-form-item>
                      </el-col>
                    </el-row>
                  </el-form>
                </el-tab-pane>
                <el-tab-pane label="预警信息" name="预警信息">
                  <div v-if="props.row.strategyLog && props.row.strategyLog.length > 0">
                    <el-row>
                      <el-col :span="4" class="warning">
                        <span>预警设备</span>
                      </el-col>
                      <el-col :span="4" class="warning">
                        <span>预警事件</span>
                      </el-col>
                      <el-col :span="4" class="warning">
                        <span>预警时间</span>
                      </el-col>
                      <el-col :span="4" class="warning">
                        <span>通行次数</span>
                      </el-col>
                      <el-col :span="4" class="warning">
                        <span>通行天数/天</span>
                      </el-col>
                      <el-col :span="4" class="warning">
                        <span>最后通行时间</span>
                      </el-col>
                    </el-row>
                    <el-row v-for="(v, inx) in props.row.strategyLog" :key="inx">
                      <el-col :span="4" class="warning_type">
                        <span>
                          {{ v.device.Name || '-' }}
                        </span>
                      </el-col>
                      <el-col :span="4" class="warning_type">
                        <span>
                          {{ v.warningType || '-' }}
                        </span>
                      </el-col>
                      <el-col :span="4" class="warning_type">
                        <span>
                          {{ $format(v.update_time) || '-' }}
                        </span>
                      </el-col>
                      <el-col :span="4" class="warning_type">
                        <span>
                          {{ v.count || '-' }}
                        </span>
                      </el-col>
                      <el-col :span="4" class="warning_type">
                        <span>
                          <span>{{ warnEvent(v.warningEvent) == '频繁通行通知' ? '1天' : '-' }}</span>
                        </span>
                      </el-col>
                      <el-col :span="4" class="warning_type">
                        <span>
                          {{ $format(v.latelyTime) || '-' }}
                        </span>
                      </el-col>
                    </el-row>
                  </div>
                  <div v-else style="text-align: center; font-size: 16px">暂无数据</div>
                </el-tab-pane>
                <el-tab-pane label="事件信息" name="事件信息">
                  <el-form label-position="left" label-width="90px" class="demo-table-expand" style="padding: 10px">
                    <el-row>
                      <el-col :span="12">
                        <el-form-item label="事件：">
                          <div v-if="carData && carData.length > 0">
                            <p v-for="(car, inx) in carData" :key="inx">
                              <span>{{ car.card }}</span>
                            </p>
                          </div>
                          <div v-else>暂无数据</div>
                        </el-form-item>
                      </el-col>
                    </el-row>
                  </el-form>
                </el-tab-pane>
                <el-tab-pane label="通行记录" name="通行记录">
                  <el-form label-position="left" label-width="90px" class="demo-table-expand" style="padding: 10px">
                    <el-row>
                      <el-col :span="12">
                        <el-form-item label="记录详情：">
                          <div v-if="peoplepass.length > 0">
                            <p v-for="(peop, inx) in peoplepass" :key="inx" style="width: 500px">
                              <span>{{ peop.CName }}</span>
                              <span class="ml5">抓拍点位:{{ peop.location_id || '--' }}</span>
                              <span class="ml5">进出方向:{{ peop.direction === 1 ? '进' : '出' }}</span>
                              <span class="ml5">{{ $format(new Date(peop.device.Time)) }}</span>
                            </p>
                          </div>
                          <div v-else>暂无数据</div>
                        </el-form-item>
                      </el-col>
                    </el-row>
                  </el-form>
                </el-tab-pane>
                <el-tab-pane label="同住人员" name="同住人员">
                  <el-table border stripe style="width: 100%" v-loading="loading" element-loading-text="加载中..."
                    :data="family">
                    <el-table-column label="头像" width="100px" header-align="center" align="center">
                      <template slot-scope="scope">
                        <img :src="baseUrlImage + 'avatar/' + scope.row.person[0].photo" alt
                          style="width: 50px; height: 50px" v-image-preview />
                      </template>
                    </el-table-column>
                    <el-table-column label="姓名" header-align="center" align="center">
                      <template slot-scope="scope">
                        <span>{{ scope.row.person[0].name }}</span>
                      </template>
                    </el-table-column>
                    <el-table-column header-align="center" align="center" label="所在小区">
                      <template slot-scope="scope">
                        <span>{{ scope.row.person[0].address }}</span>
                      </template>
                    </el-table-column>
                    <el-table-column header-align="center" align="center" label="录入方式">
                      <template slot-scope="scope">
                        <span>{{ scope.row.person[0].registrationS }}</span>
                      </template>
                    </el-table-column>
                    <el-table-column label="类型" header-align="center" align="center">
                      <template slot-scope="scope">
                        <span>{{ scope.row.type }}</span>
                      </template>
                    </el-table-column>
                  </el-table>
                </el-tab-pane>
                <el-tab-pane label="过往病史" name="过往病史">
                  <el-table border stripe style="width: 100%" v-loading="loading" element-loading-text="加载中..."
                    :data="sicklist">
                    <el-table-column label="病例" header-align="center" align="center">
                      <template slot-scope="scope">
                        <div v-for="it in scope.row.sickGroup" :key="it">
                          {{ it.name }}
                        </div>
                      </template>
                    </el-table-column>
                    <el-table-column label="体检时间" header-align="center" align="center">
                      <template slot-scope="scope">
                        <span>{{ scope.row.sickTime || '-' }}</span>
                      </template>
                    </el-table-column>
                  </el-table>
                </el-tab-pane>
              </el-tabs>
            </div>
          </template>
        </el-table-column>
      </div>
      <div>
        <el-table-column label="头像" width="100px" header-align="center" align="center">
          <template slot-scope="scope">
            <img :src="baseUrlImage + 'avatar/' + scope.row.photo" alt style="width: 50px; height: 50px"
              v-image-preview />
          </template>
        </el-table-column>
        <el-table-column label="姓名" width="60" header-align="center" align="center">
          <template slot-scope="scope">
            <span>{{ scope.row.name }}</span>
          </template>
        </el-table-column>
        <el-table-column header-align="center" align="center" label="性别" width="60">
          <template slot-scope="scope">
            <span v-if="scope.row.gender == 0">男</span>
            <span v-if="scope.row.gender == 1">女</span>
          </template>
        </el-table-column>
        <el-table-column label="类型" width="80" header-align="center" align="center">
          <template slot-scope="scope">
            <span>{{ scope.row.type }}</span>
          </template>
        </el-table-column>
        <el-table-column label="房屋数量" width="80" header-align="center" align="center">
          <template>
            <span>{{ countnum }}</span>
          </template>
        </el-table-column>
        <el-table-column width="120" prop="CIDD" label="所在小区" align="center" show-overflow-tooltip>
          <template slot-scope="scope">
            <span>{{ scope.row.CIDD ? scope.row.CIDD : '-' }}</span>
          </template>
        </el-table-column>
        <el-table-column label="地址" width="200" header-align="center" align="center">
          <template slot-scope="scope">
            <span>{{ scope.row.address }}</span>
          </template>
        </el-table-column>
        <el-table-column header-align="center" align="center" label="操作">
          <template slot-scope="scope">
            <el-button size="mini" type="primary" @click="showDetail(scope.row)"
              v-show="hasPerm('personnel:OneHousehold:look') && !scope.row.showDetail">
              查看
            </el-button>
            <el-button size="mini" type="primary" @click="hideDetail(scope.row)"
              v-show="hasPerm('personnel:OneHousehold:hide') && scope.row.showDetail">
              隐藏
            </el-button>
          </template>
        </el-table-column>
      </div>
      <!-- fixed="right" -->
    </el-table>
  </div>
</template>
<script>
export default {
  data() {
    return {
      activeName: '基本信息',
      familyArr: [],
      loading: true,
      baseUrlImage: this.global.baseUrlImage,
      dictList: {},
      currentIndex: 999,
      registration: '',
      departs_arr: [],
      pageRequest: {
        page: 1,
        limit: 10
      },
      villageList: [],
      carData: [],
      warnlist: [],
      getRowKeys(row) {
        return row.id;
      },
      expands: [],
      peoplepass: [],
      license: '',
      carPass: [],
      countnum: '',
      HID: '',
      family: [],
      sicklist: [],
      photoCheck: 0 // 手机显示
    };
  },
  mounted() {
    this.dictList = JSON.parse(sessionStorage.getItem('dictData'));
  },
  methods: {
    checkPhoto(row) {
      if (row.photoCheck === this.photoCheck) {
        this.photoCheck = 0;
      } else {
        this.$nextTick(() => {
          //nextTick并不是用来监听DOM变更，它的作用是一次性更改数据，并且渲染DOM
          this.$set(this.familyArr, this.photoCheck - 1, row);
        });
        this.photoCheck = row.photoCheck;
      }
    },
    // // 小区查询
    getCommunityList() {
      this.villageList = this.$store.state.village.villageList;
    },
    getsicklist() { },
    toggleRowExpansion(row, old) {
      console.log(row.houer);
      this.getCommunityList();
      this.expands = [];
      this.expands.push(row.id);
      if (old && old.showDetail) old.showDetail = false;
      row.showDetail = true;
      this.searchParty(row);
      this.searchPersonCar(row);
      // this.serachCarpass(row)
      this.getsick(row);
      this.serachPeoplepass(row);
      this.getWarnRecord(row);
      this.searchhouser();
      // this.handlelist(row);
    },
    filterDep(val, datas) {
      if (!val) return '-';
      let idx = datas.find((item) => {
        return item.DID === val;
      });
      if (!idx) return '-';
      return idx.name;
    },
    getDepartment(data) {
      let str = this.filterDep(data, this.departs_arr);
      return str;
    },
    showDetail(row) {
      row.showDetail = true;
      this.activeName = '基本信息';
      this.$refs.el_table.toggleRowExpansion(row, true);
    },
    hideDetail(row) {
      row.showDetail = false;
      this.$refs.el_table.toggleRowExpansion(row, false);
    },
    editList(index, row) {
      if (this.currentIndex == row.id) {
        this.currentIndex = '';
      } else {
        this.currentIndex = row.id;
      }
    },
    // 家庭成员
    parentHandleclick(e) {
      if (e.houser) {
        this.HID = e.houser[0].HID;
      }
      console.log(e)
      this.familyArr = [];
      let that = this;
      that.loading = true;
      this.$api.home
        .person_hasHouse({
          page: 1,
          limit: 20,
          PID: e.PID
        })

        .then((res) => {
          that.familyArr = res.data;
          that.countnum = res.count;
          that.familyArr.forEach((item, index) => {
            item.photoCheck = index + 1;
            this.villageList.map((val) => {
              if (item.CID == val.CID) {
                item.CIDD = val.name;
              }
            });
            let obj3 = that.dictList.sys_politics_type.find((val) => {
              // val是字典的 item是列表元素
              if (item.political) {
                return val.DID == item.political;
              }
            });
            if (obj3 && obj3.name) {
              item.political = obj3.name;
            }
            // item.political = item.person[0].political;
            // }
            // 循环字典找到匹配项
            let obj6 = that.dictList.sys_person_type.find((val) => {
              // val是字典的 item是列表元素
              if (item.type) {
                return val.DID == item.type;
              }
            });

            // 如果匹配成功则存在obj 字典存在匹配项则将匹配项的名称赋值给接口返回数据
            if (obj6 && obj6.name) {
              item.type = obj6.name;
            }
            // 循环字典找到匹配项
            let obj = that.dictList.sys_persion_source.find((val) => {
              // val是字典的 item是列表元素
              if (item.registration) {
                return val.DID == item.registration;
              }
            });

            // 如果匹配成功则存在obj 字典存在匹配项则将匹配项的名称赋值给接口返回数据
            if (obj && obj.name) {
              item.registration = obj.name;
            }
            // 只能定义一个
            let obj2 = that.dictList.sys_person_sign.find((val) => {
              val.dictionaries.find((val1) => {
                if (item.sign) {
                  for (let ss of item.sign) {
                    if (val1.DID == ss) {
                      // 如果不存在 signName 字段则初始化为空
                      if (!item.signName) item.signName = '';
                      // 将匹配到的类型赋值给 signName 字段
                      item.signName += `${val1.name} `;
                    }
                  }
                }
              });
            });
            item.id = index + 1;
          });
          that.loading = false;
        });
    },
    getsick(row) {
      let params = {};
      params.dbName = 'person_medical_history';
      params.limit = 5;
      params.page = 1;
      params.where = {
        PID: row.PID
      };

      this.$api.user.ywpt_data_list(params).then((res) => {
        if (res.code == 0) {
          this.sicklist = res.data;
        }
      });
    },
    // 查询车辆
    searchPersonCar(person) {
      console.log(person);
      let param = {
        person_id: person.PID
      };
      let params = Object.assign(param);
      let paramJson = JSON.stringify(params);
      this.loading = true;
      this.$api.home.car_getlist(paramJson).then((res) => {
        if (res.code == 0) {
          this.carData = res.data;
          let license = [];
          res.data.map((item) => {
            license.push(item.license);
          });
          this.serachCarpass(license);
          this.loading = false;
        } else {
          this.$message({ message: '操作失败, ' + res.msg, type: 'error' });
        }
      });
    },
    //查询车辆通行记录
    serachCarpass(person) {
      let param = {
        where: {
          licence: person
          //  endTime: this.$format(new Date()),
          // startTime: this.$format(new Date().getTime() - 7 * 24 * 60 * 60 * 1000),
        }
      };
      this.$api.home.sys_carPass_list(param).then((res) => {
        if (res.code == 0) {
          this.carPass = res.data;
        } else {
          this.$message({ message: '操作失败, ' + res.msg, type: 'error' });
        }
      });
    },
    serachPeoplepass(person) {
      let param = {
        where: { person_id: person.PID },
        endTime: this.$format(new Date()),
        startTime: this.$format(new Date().getTime() - 7 * 24 * 60 * 60 * 1000)
      };
      this.$api.home.sys_pass_list(param).then((res) => {
        if (res.code == 0) {
          this.peoplepass = res.data;
          console.log(this.peoplepass);
        } else {
          this.$message({ message: '操作失败, ' + res.msg, type: 'error' });
        }
      });
    },
    //查询家庭成员
    searchhouser() {
      let that = this;
      this.$api.home
        .sys_family_list({
          page: 1,
          limit: 20,
          HID: this.HID
        })
        .then((res) => {
          that.family = res.data;
          that.family.forEach((item, index) => {
            let obj3 = that.dictList.sys_politics_type.find((val) => {
              // val是字典的 item是列表元素
              if (item.person && item.person[0] && item.person[0].political) {
                return val.DID == item.person[0].political;
              }
            });
            if (obj3 && obj3.name) {
              item.person[0].political = obj3.name;
            }
            // item.political = item.person[0].political;
            // }
            // 循环字典找到匹配项
            let obj6 = that.dictList.sys_person_type.find((val) => {
              // val是字典的 item是列表元素
              if (item.person && item.person[0] && item.person[0].type) {
                return val.DID == item.person[0].type;
              }
            });

            // 如果匹配成功则存在obj 字典存在匹配项则将匹配项的名称赋值给接口返回数据
            if (obj6 && obj6.name) {
              item.type = obj6.name;
            }
            // 循环字典找到匹配项
            let obj = that.dictList.sys_persion_source.find((val) => {
              // val是字典的 item是列表元素
              if (item.person && item.person[0] && item.person[0].registration) {
                return val.DID == item.person[0].registration;
              }
            });

            // 如果匹配成功则存在obj 字典存在匹配项则将匹配项的名称赋值给接口返回数据
            if (obj && obj.name) {
              item.person[0].registration = obj.name;
            }
            // 只能定义一个
            let obj2 = that.dictList.sys_person_sign.find((val) => {
              val.dictionaries.find((val1) => {
                if (item.person && item.person[0] && item.person[0].sign) {
                  for (let ss of item.person[0].sign) {
                    if (val1.DID == ss) {
                      // 如果不存在 signName 字段则初始化为空
                      if (!item.person[0].signName) item.person[0].signName = '';
                      // 将匹配到的类型赋值给 signName 字段
                      item.person[0].signName += `${val1.name} `;
                    }
                  }
                }
              });
            });
            item.id = index + 1;
          });
          console.log(this.family);
        });
    },
    // 查询党组织
    searchParty(row) {
      row.departmentName = '';
      let param = {
        where: {
          status: 1,
          idCard: row.idCard
        }
      };
      let params = Object.assign(param, this.filters);
      let paramJson = JSON.stringify(params);
      this.loading = true;
      this.$api.wxNotic.party_building_list(paramJson).then((res) => {
        if (res.code == 0) {
          this.loading = false;
          if (res.data && res.data[0]) {
            let data = res.data[0];
            if (data.department) {
              row.departmentName = this.getDepartment(data.department);
            }
          }

          let obj4 = this.dictList.sys_party_type.find((val) => {
            // val是字典的 item是列表元素
            if (res.data && res.data[0] && res.data[0].type_party) {
              return val.DID == res.data[0].type_party;
            }
          });
          row.type_party = '';
          if (obj4 && obj4.name) {
            row.type_party = obj4.name;
          }
        } else {
          this.$message({ message: '操作失败, ' + res.msg, type: 'error' });
        }
      });
    },
    getDeparts() {
      let that = this;
      return new Promise((resolve) => {
        let params = {
          name: '',
          GID: '',
          PGID: '',
          status: 1,
          limit: '',
          page: ''
        };
        that.loading = true;
        that.$api.wxNotic.party_depart_list(params).then((res) => {
          if (res.code == 0) {
            that.loading = false;
            that.departs = res.data;
            that.departs_arr = res.arr;
          } else {
            that.$message({
              message: '获取数据失败, ' + res.msg,
              type: 'error'
            });
          }
          resolve();
        });
      });
    },
    //获取预警记录
    getWarnRecord(row) {
      this.loading = true;
      let param = {
        CID: row.CID,
        person_id: row.PID,
        isNotify: 1,
        page: this.pageRequest.page,
        limit: this.pageRequest.limit,
        endTime: this.$format(new Date()),
        startTime: this.$format(new Date().getTime() - 7 * 24 * 60 * 60 * 1000),
        warningEvent: '',
        warningType: []
      };
      this.$api.home.strategy_log_list(param).then((res) => {
        this.loading = false;
        if (res.code == 0) {
          row.strategyLog = {};
          row.strategyLog = res.data;
          row.strategyLog.forEach((item, index) => {
            item.count = item.count;
            let obj5 = this.dictList.sys_early_warning.find((val) => {
              // val是字典的 item是列表元素
              if (item.warningEvent) {
                return val.DID == item.warningEvent;
              }
            });
            if (obj5 && obj5.name) {
              item.warningType = obj5.name;
            }
          });
        }
      });
    },

    getdict() {
      this.warnlist = JSON.parse(sessionStorage.getItem('dictData')).sys_early_notify;
      //
      this.persign = JSON.parse(sessionStorage.getItem('dictData')).sys_person_sign;
    },
    // 预警事件
    warnEvent(row) {
      for (let i = 0; i < this.warnlist.length; i++) {
        if (this.warnlist[i].DID == row) {
          return this.warnlist[i].name;
        }
      }
    },
    // 更新人员
    updateOne(index, row) {
      let that = this;
      that.loading = true;
      this.$api.home
        .sys_relation_update({
          _id: row._id,
          relation: row.relation
        })
        .then((res) => {
          that.loading = false;
          that.currentIndex = 999;
        });
    },
    closeWin() {
      this.familyArr = [];
      let that = this;
      that.currentIndex = 999;
    }
  },
  created() {
    // 查询人员类型
    let diclist = JSON.parse(sessionStorage.getItem('dictData'));
    this.getDeparts();
    this.getdict();
  }
};
</script> 

<style lang="scss" scoped>
.demo-table-expand {
  font-size: 0;
}

.demo-table-expand label {
  width: 90px;
  color: #99a9bf;
}

.demo-table-expand .el-form-item {
  margin-right: 0;
  margin-bottom: 0;
  width: 50%;
}

.faimly_detail {
  /deep/.el-table__expand-column {
    display: none;
  }
}

.warning {
  text-align: center;
  font-weight: 600;
  color: #000;
  font-size: 14px;
  margin-bottom: 5px;
  border-bottom: 1px solid #ebeef5;
}

.warning_type {
  text-align: center;
  margin-bottom: 5px;
  line-height: 23px;
  border-bottom: 1px solid #ebeef5;
}
</style>}